<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <!-- 注意：canvas需要设置宽高 -->
  <canvas id="line" width="300" height="200" style="border: 1px solid #ccc;"></canvas>
</body>
<script>
  // 获取canvas元素
  const canvas = document.querySelector('#line')
  // 获取canvas上下文环境对象
  const ctx = canvas.getContext('2d')

  // 绘制线条
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(150, 150);
  ctx.strokeStyle = 'green';
  ctx.lineWidth = 2;
  ctx.stroke();
</script>
</html>
